<script setup lang="ts">
const { isLoading } = useStatusStore();
</script>
<template>
  <Loading v-if="isLoading()" />
  <header>
    <Container class="py-3">
      <nav class="flex justify-between items-center gap-x-4">
        <div class="flex justify-start items-center gap-x-4">
          <h2 class="text-xl font-normal">
            <NuxtLink to="/">博客</NuxtLink>
          </h2>
          <ul class="flex justify-start items-center gap-x-2">
            <li>
              <NuxtLink to="/" class="hover:text-red-500">首页</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/post" class="hover:text-red-500">博文</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/" class="hover:text-red-500">用户</NuxtLink>
            </li>
          </ul>
        </div>
        <form
          class="flex bg-white rounded-xl border border-gray-200 overflow-hidden"
        >
          <div>
            <input
              class="px-3 py-1 focus:outline-none"
              placeholder="输入关键字"
            />
          </div>
          <div>
            <button class="bg-blue-600 text-white px-3 py-1">搜索</button>
          </div>
        </form>
      </nav>
    </Container>
  </header>
  <section class="my-6">
    <Container>
      <NuxtPage />
    </Container>
  </section>
  <footer>
    <Container class="text-sm">&copy; 2024 CYRUS</Container>
  </footer>
</template>
